<template>
  <div class="bodys">
    <!-- 标题 -->
    <div class="dd">
      <span class="dd-gl">订单管理</span>/<span class="dd-zl">订单总览</span>
    </div>

    <!-- 图标！！ -->
    <div class="box">
      <div class="top-left" id="main"></div>
      <div class="top-rigth" id="main1"></div>

      <div class="bottom-center">
        <div>
          <div class="sp1">全部订单</div>

          <select class="group" value="1">
            <option value="1">已支付</option>
            <option value="2">未支付</option>
          </select>

          <el-input
            v-model="input"
            class="w-50 m-2"
            placeholder="请输入需要查询的订单编号"
            :suffix-icon="Search"
            @blur="search"
          />

          <el-button
            type="primary"
            @click="dialogVisible = true"
            style="
              width: 85px;
              height: 25px;
              background: #4ca4fe;
              border-radius: 8px;
              margin-left: 20px;
            "
          >
            <el-icon><Plus /></el-icon>
            添加</el-button
          >
          <div class="add">
            <el-dialog
              v-model="dialogVisible"
              title="新增订单信息"
              width="40%"
              :before-close="handleClose"
            >
              <p>
                <span>订单类型:</span>
                <el-select v-model="typevalue" class="m-2" placeholder="请选择">
                  <el-option label="租房" value="租房" />
                  <el-option label="家服" value="家服" />
                  <el-option label="维修" value="维修" />
                </el-select>
              </p>
              <p>
                <span>订单编号:</span>
                <el-input v-model="numinput" placeholder=" 请输入数字" />
              </p>
              <p>
                <span>姓名:</span>
                <el-input v-model="nameinput" placeholder=" 请输入文字" />
              </p>
              <p>
                <span> 性别:</span>
                <el-select v-model="sex" class="m-2" placeholder="请选择">
                  <el-option label="男" value="男" />
                  <el-option label="女" value="女" />
                </el-select>
              </p>
              <p>
                <span> 联系电话:</span>

                <el-input v-model="phoneinput" placeholder=" 请输入数字" />
              </p>

              <p>
                <span>支付方式: </span>
                <el-select v-model="pay" class="m-2" placeholder="请选择">
                  <el-option label="微信支付" value="微信支付" />
                  <el-option label="支付宝支付" value="支付宝支付" />
                  <el-option label="银行卡支付" value="银行卡支付" />
                </el-select>
              </p>

              <p>
                <span>订单创建日期： </span>
                <el-date-picker
                  v-model="time"
                  type="date"
                  placeholder="Pick a day"
                  :size="size"
                />
              </p>

              <p>
                <span> 收入:</span>
                <el-input
                  type="number"
                  v-model="money"
                  placeholder=" 请输入数字"
                />
              </p>
              <p class="msg" v-show="show">必须输入订单类型,姓名和收入</p>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="save"> 保存 </el-button>
                </span>
              </template>
            </el-dialog>
          </div>
        </div>

        <el-table
          :data="tableData"
          style="width:100%"
          :stripe="true"
          :cell-style="setCellColor"
          
        >
          <el-table-column prop="type" label="订单类型"  />
          <el-table-column prop="num" label="订单编号" />
          <el-table-column prop="name" label="姓名"
          />
          <el-table-column prop="sex" label="性别"
            />
          <el-table-column prop="phone" label="联系电话" width="130" />
          <el-table-column prop="paytype" label="支付方式" width="130" />
          <el-table-column label="订单创建日期" width="150">
            <template #default="scope">
              <span>{{ formatTime(scope.row.time) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="money" label="收入" width="80" />+

          <el-table-column label="操作" width="180">
            <template #default="scope">
              <el-button>查看</el-button>
              <el-popconfirm
                title="是否删除此条数据"
                @confirm="confirm(scope.row.num)"
                @cancel="cancel"
              >
                <template #reference>
                  <el-button>删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :page-size="10"
          layout="prev, pager, next"
          :total="total"
          @current-change="changePage"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { Search, Plus } from "@element-plus/icons-vue";
import * as echarts from "echarts";
import "@/mock/ordertotal";
import axios from "axios";
import { ElMessage, ElMessageBox } from "element-plus";

const init1 = () => {
  var chartDom = document.getElementById("main");
  if (chartDom) {
    const myChart = echarts.init(chartDom);
    myChart.setOption({
      title: {
        text: "订单管理/订单总理",
      },
      xAxis: {
        type: "category",
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
      },
      yAxis: {
        type: "value",
      },
      legend: {
        top: 10,
        right: 60,
        data: ["房屋", "家服", "维修"],
      },
      series: [
        {
          data: [610, 310, 320, 700, 1050, 1111, 1000, 500, 400, 500, 600, 700],
          type: "line",
          smooth: true,
          name: "房屋",
          showSymbol: false,
        },
        {
          data: [
            1400, 900, 800, 1000, 1250, 1300, 1280, 1270, 1200, 1100, 1040, 850,
          ],
          type: "line",
          smooth: true,
          name: "家服",
          showSymbol: false,
        },
        {
          data: [
            1500, 1150, 1100, 1400, 1600, 1760, 1799, 1730, 1650, 1450, 1200,
            1150, 1900,
          ],
          type: "line",
          smooth: true,
          name: "维修",
          showSymbol: false,
        },
      ],
    });
  }
};

const init2 = () => {
  var chartDom = document.getElementById("main1");
  if (chartDom) {
    const myChart = echarts.init(chartDom);
    myChart.setOption({
      title: {
        text: "租房时长占比",
      },
      legend: {
        top: "bottom",
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      series: [
        {
          name: "Nightingale Chart",
          type: "pie",
          radius: [80, 130],
          center: ["50%", "50%"],
          roseType: "area",
          itemStyle: {
            borderRadius: 8,
          },
          data: [
            { value: 40, name: "51%" },
            { value: 50, name: "49%" },
          ],
        },
      ],
    });
  }
};

onMounted(() => {
  init1();
  init2();
});

const select = ref("");
const typevalue = ref("");
const nameinput = ref();
const numinput = ref();
const sex = ref();
const phoneinput = ref();
const pay = ref();
const time = ref();
const money = ref();
const size = ref<"default">("default");
const dialogVisible = ref(false);
const total = ref<number>(0);
let show = ref(false);
const save = () => {
  axios
    .post("/api/ordertotal/add", {
      type: typevalue.value,
      num: numinput.value,
      time: new Date(time.value).getTime(),
      name: nameinput.value,
      sex: sex.value,
      phone: phoneinput.value,
      paytype: pay.value,
      money: money.value,
    })
    .then((res) => {
      if (res.data.status === 0) {
        getData();
      } else {
        show.value = true;
        dialogVisible.value = true;
      }
    });

  dialogVisible.value = false;
};
const handleClose = (done: () => void) => {
  ElMessageBox.confirm("确认关闭吗?您的内容还未保存")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
const open = (id: number) => {
  ElMessageBox.confirm("确认删除此订单吗?", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      axios.post("/api/houseorder/del", { num: id }).then((res) => {
        getData();
      });
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
const formatTime = (time: number) => {
  const date = new Date(time);
  const y = date.getFullYear();
  const m = date.getMonth() + 1;
  const d = date.getDate();

  return y + "." + m + "." + d;
};
const value = ref("");

const options = [
  {
    value: "已支付",
    label: "已支付",
  },
  {
    value: "未支付",
    label: "未支付",
  },
];
const input = ref("");
const search = () => {
  page = 1;
  getData();
};

const tableData = ref([]);

let page = 1;

const getData = () => {
  axios
    .post("/api/ordertotal", {
      pageSize: 10,
      currentPage: page,
      search: input.value,
    })
    .then((res) => {
      tableData.value = res.data.result;
      total.value = res.data.count;
    });
};

const changePage = (page1: number) => {
  page = page1;
  getData();
};

onMounted(() => {
  getData();
});
const confirm = (num: number) => {
  console.log("确定删除", num);
  axios
    .post("/api/ordertotal/del", {
      num: num,
    })
    .then((res) => {
      getData();
    });
};
const setCellColor = ({ columnIndex }: any) => {
  if (columnIndex === 7) {
    return { color: "#FF8F4D" };
  }
};

const cancel = () => {};
</script>

<style lang="less" scoped>
.bodys {
  width: 100%;
  height: 100%;
  background: #f6f6f6;
  // background-color: red;
  margin-left: 16px;

  .dd {
    margin-top: 16px;

    .dd-gl {
      width: 46px;
      height: 13px;
      font-size: 12px;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: #888888;
      line-height: 21px;
      font-weight: 900;
    }

    .dd-zl {
      width: 47px;
      height: 13px;
      font-size: 12px;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: #555555;
      line-height: 21px;
      font-weight: 900;
      // background-color: red;
    }
  }

  .box {
    width: 100%;
    height: 100%;

    div {
      position: relative;
    }
    .top-left {
      width: 750px;
      height: 392px;
      background-color: #fff;
      margin-top: 15px;
      display: inline-block;
    }

    .top-rigth {
      width: 440px;
      height: 392px;
      background-color: #fff;
      display: inline-block;
      margin-left: 16px;
    }

    .bottom-center {
      // width: 1568px;
      // height: 532px;
      width: 100%;
      height: 100%;
      background: #ffffff;
      border-radius: 8px;
      margin-top: 16px;

      .w-50 {
        width: 300px;
        height: 28px;
        // position: absolute;
        // right: 150px;
        margin-left: 500px;
        :deep(.el-input__wrapper) {
          border-radius: 10px;
          background-color: rgb(244, 242, 242);
        }
      }
      .sp1 {
        width: 48px;
        height: 13px;
        font-size: 12px;
        font-family: Adobe Heiti Std;
        font-weight: 900;
        color: #555555;
        line-height: 21px;
        padding-top: 16px;
        margin-left: 17px;
        display: inline-block;
      }
      .group {
        margin-left: 16px;
        width: 151px;
        height: 22px;
        background: #f6f6f6;
        border-radius: 8px;
        border: none;
        color: #888888;
      }
      .add {
        p {
          width: 100%;
          height: 30px;
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          font-size: 16px;
        }
        span {
          display: inline-block;
          width: 120px;
        }
        .el-input {
          width: 200px;
        }
        .dialog-footer button:first-child {
          margin-right: 295px;
          margin-top: -17px;
        }
        .dialog-footer button:last-child {
          margin-right: -2px;
          margin-top: -44px;
          border: 0;
          background-color: #ff8f4d;
        }
        .msg {
          text-align: center;
          color: red;
          font-size: 20px;
        }
      }
      .inp1 {
        width: 311px;
        height: 24px;
        background: #f6f6f6;
        border-radius: 8px;
        border: none;
        margin-left: 899px;
        font-size: 12px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #888888;
      }

      .fdj {
        display: inline-block;
        width: 40px;
        height: 40px;
        text-align: center;
        position: absolute;
        right: 119px;
        top: 5px;
        line-height: 40px;
      }
      :deep(th.el-table__cell) {
        background-color: #4ca4fe;
        color: #fff;
      }
       :deep(.el-table__cell){
        text-align: center;
       }
    }
  }
}
</style>
